<template>
  <div
    class="video-time-slider-box">
    <el-slider
      v-model="currentVal"
      :format-tooltip="formatTooltip"
      :min="minNum"
      :max="maxNum"
      @change="change"
    />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 3600 * 24
    },
    min: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentVal: 0
    }
  },
  computed: {
    minNum() {
      return parseInt((this.min - this.todayStartTime) / 1000)
    },
    maxNum() {
      return parseInt((this.max - this.todayStartTime) / 1000)
    },
    todayStartTime() {
      if (this.min) {
        return this.$dayjs(this.min).startOf('day').valueOf()
      }
      return 0
    }
  },
  watch: {
    value(newVal) {
      this.currentVal = parseInt((newVal + this.minNum * 1000) / 1000)
    }
  },
  methods: {
    change(val) {
      this.$emit('seedVideo', val - this.minNum)
    },
    formatTooltip(val) {
      // 转换为式分秒
      let h = parseInt(val / 60 / 60 % 24)
      h = h < 10 ? '0' + h : h
      let m = parseInt(val / 60 % 60)
      m = m < 10 ? '0' + m : m
      let s = parseInt(val % 60)
      s = s < 10 ? '0' + s : s
      // 作为返回值返回
      return `${h}:${m}:${s}`
    }
  }
}
</script>

<style lang="scss" scoped>
.video-time-slider-box{
}

</style>
